<template>
	<div>
		<el-page-header @back="goBack" content="订单详情页面">
		</el-page-header>
		<div style="padding: 10px;width: 100px;float: left;">
			<el-steps :space="200" :active="step" finish-status="success" direction="vertical">
				<el-step v-for="(s,i) in steps" :title="s.label"></el-step>
			</el-steps>
		</div>
		<div class="step-box" :class="{isStep:step!==1}">
			<div v-if="getOrderBuyer">订单已生成,等待卖方确定</div>
			<div v-else>
				请等待买家联系
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 1" @click="nextStep">
				</el-button>
			</div>
		</div>
		<div class="step-box" :class="{isStep:step!==2}">
			<div v-if="getOrderBuyer">看房完成等待买家确认，进行下一步洽谈</div>
			<div v-else>
				买家已看房？确定购买？
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 2" @click="nextStep">
				</el-button>
			</div>
		</div>
		<div class="step-box" :class="{isStep:step!==3}">
			<div v-if="getOrderBuyer">请与卖家洽淡购房细节</div>
			<div v-else>
				是否与买家洽淡完成？
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 3" @click="nextStep">
				</el-button>
			</div>
		</div>
		<div class="step-box" :class="{isStep:step!==4}">
			<div v-if="getOrderBuyer">请完成购房手续的处理！</div>
			<div v-else>
				是否完成手续？
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 4" @click="nextStep">
				</el-button>
			</div>
		</div>
		<div class="step-box" :class="{isStep:step!==5}">
			<div v-if="getOrderBuyer">
				请与卖家签订购房合同！
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 5" @click="nextStep">
				</el-button>
			</div>
			<div v-else>
				请与买家签订购房合同！
				<el-button type="success" icon="el-icon-check" circle :disabled="step !== 5" @click="nextStep">
				</el-button>
			</div>
		</div>
		<div class="step-box" :class="{isStep:step!==6}">
			<div v-if="getOrderBuyer">恭喜交易完成！</div>
			<div v-else>
				恭喜交易完成！
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getData
	} from '@/api/data'
	import {
		nextStep
	} from '@/api/order'
	export default {
		data() {
			return {
				oid: '',
				sid: 0,
				bid: 0,
				step: 0,
				steps: [],
			}
		},
		created() {
			this.getSteps()
			this.oid = this.$route.query.oid
			this.step = parseInt(this.$route.query.step)
			this.sid = this.$route.query.sid
			this.bid = this.$route.query.bid
		},
		methods: {
			goBack() {
				if (this.getOrderBuyer) {
					this.$router.push({
						name: "MyOrder"
					});
				} else {
					this.$router.push({
						name: "MySale"
					});
				}

			},
			async getSteps() {
				const {
					data
				} = await getData("step")
				for (var i = 0; i < data.length; i++) {
					let obj = {
						value: data[i].valueEn,
						label: data[i].value
					}
					this.steps.push(obj)
				}
			},
			nextStep() {
				nextStep(this.oid, this.step).then(res => {
					if (res.code === 1) {
						this.step = this.step + 1
					}
				})
			}
		},
		computed: {
			getOrderBuyer() {
				return this.bid == this.$store.getters.info.id
			}
		}
	}
</script>
<style scoped>
	.el-step__main {
		text-align: left;
	}

	.step-box {
		height: 200px;
	}

	.isStep {
		color: gray;
	}
</style>
